<template>
  <div class="content">
    <div class="header">
      <div class="messagesActive">
        <div class="icon">
          <i class="el-icon-warning"></i>
        </div>
        <div class="text">
          根据用户渠道配置剧集的收费标准，若用户充值的短剧不在渠道配置中，则付费标准根据剧场管理中的短剧收费
        </div>
      </div>
    </div>
    <el-tabs
      v-model="activeName"
      style="padding:20px;padding-bottom:0;"
      @tab-click="tabClick"
    >
      <el-tab-pane
        label="付费设置"
        name="pay"
      ></el-tab-pane>
      <el-tab-pane
        label="日志"
        name="log"
      ></el-tab-pane>
    </el-tabs>
    <div v-if="activeName==='pay'">
      <div class="header rowFlex rowEnd columnCenter">
        <el-button
          style="height: 32px !important;"
          type="primary"
          @click="addCharge"
        >新增配置</el-button>
      </div>
      <div
        class="table-table"
        style="padding:0 20px;margin-top:20px;"
      >
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:pay_coin="{row}">
            <div class="showScoreEdit">
              <span class="chapter_title">{{ row.pay_coin }}</span>
              <span
                v-if="row.step&&row.step.length>0"
                style="margin-left: 8px;"
                class="tag"
                @click="onShowStep(row)"
              >阶梯价</span>
            </div>
          </template>
          <template v-slot:zip="scope">
            <el-button
              type="text"
              size="medium"
              @click="edit(scope.row,scope.$index)"
            >修改</el-button>
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              style="margin-left:10px;"
              title="确定删除吗？"
              @confirm="delRow(scope.row)"
            >
              <el-button
                slot="reference"
                type="text"
                size="medium"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </BiTable>
      </div>
    </div>
    <div v-else>
      <log :info="rowInfo" />
    </div>
    <addCharge
      v-if="showAddCharge"
      :show.sync="showAddCharge"
      :row-info="rowInfo"
      :edit-info="editInfo"
      :playlet-ids="[]"
      @result="searchList"
    />
    <StepDialogVue
      v-if="StepDialog.show"
      :step="StepDialog.step"
      @close="onCloseStep"
    ></StepDialogVue>
  </div>
</template>

<script>
import StepDialogVue from '@/components/StepDialog'
import { channelPlayletSave } from '@/api/channel'
import { channelPlayletIndex, channelPlayletDel } from '@/api/channel'
import addCharge from './addCharge.vue'
import { formatNumber } from '@/utils/index'
import { paymentList } from '@/api/payment'
import log from './logTable.vue'
export default {
  components: {
    addCharge,
    log,
    StepDialogVue
  },
  props: ['rowInfo'],
  data() {
    return {
      formatNumber: formatNumber,
      activeName: 'pay',
      tableData: [],
      loading: false,
      tableColums: [
        {
          label: '短剧名称',
          prop: 'playlet_title'
        },
        {
          label: '收费章节',
          prop: 'start_pay_chapter'
        },
        {
          label: '定价(虚拟币/集)',
          prop: 'pay_coin',
          slotScope: true,
          minWidth: 120
        },
        {
          label: '创建人',
          prop: 'creator'
        },
        {
          label: '创建时间',
          prop: 'create_time',
          width: 160
        },
        {
          label: '操作',
          prop: 'zip',
          width: 100,
          slotScope: true
        }
      ],
      editProps: '',
      payIcon: '',
      editInfo: {},
      showAddCharge: false,
      paymentListInfo: {},
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      StepDialog: {
        step: [],
        show: false
      }
    }
  },
  mounted() {
    this.searchList()
    this.paymentList()
  },
  methods: {
    onShowStep(row) {
      this.StepDialog = {
        step: row.step,
        show: true
      }
    },
    onCloseStep() {
      this.StepDialog = {
        step: [],
        show: false
      }
    },
    tabClick(value) {},
    paymentList() {
      paymentList().then((res) => {
        if (res.data.data && res.data.data.limit_config) {
          this.paymentListInfo = res.data.data.limit_config
        }
      })
    },
    handlePageChange(row) {
      this.page_info.page = row.page
    },
    addCharge() {
      this.showAddCharge = true
      this.editInfo = {}
    },
    edit(row, index) {
      this.editInfo = row
      this.showAddCharge = true
    },
    onSubmit() {
      this.searchList()
    },
    delRow(row) {
      channelPlayletDel({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          this.searchList()
        }
      })
    },
    searchList() {
      const data = {
        mini_app_id: this.rowInfo.mini_app_id,
        channel_id: this.rowInfo.id,
        ...this.page_info
      }
      channelPlayletIndex(data).then((res) => {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.el-col.el-col-4 {
  padding: 0 20px;
}
.content {
  width: 100%;
  height: auto;
  .header {
    padding: 4px 20px;
    padding-bottom: 0;
    margin-top: 10px;
  }
  .checkBox {
    width: 100%;
    height: auto;
    background: #fdf6ec;
    border-radius: 4px;
    border: 1px solid #f2bc69;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #e6a23c;
    padding: 10px;
  }
  .content-table {
    margin-top: 0;
  }
  .showScoreEdit {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    .icon {
      // margin-left: 10px;
    }
  }

  .tableContent {
    width: 100%;
    height: auto;
    color: #909399;
    margin-bottom: 20px;
    font-weight: 500;
    .el-col {
      text-align: left;
    }
    .tableHeader {
      border-color: gray;
      background: #f7f8fa;
      width: 100%;
      height: 40px;
      border-bottom: 1px solid #ebeef5;
    }
    .tableItem {
      border-bottom: 1px solid #ebeef5;
      // padding: 0 20px;
      // margin: 0 20px 0 20px;
      .rowItem {
        height: 60px;
      }
      .title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        word-break: break-all;
      }
    }
    .tableItem:hover .tag {
      background: #bcf8da;
      color: #00994a;
    }
    .chapter_title {
      max-width: calc(100% - 30px);
      min-width: 30px;
      height: 20px;
      line-height: 20px;
      word-break: break-all;
      text-align: center;
    }
  }
  .chapter_title {
    max-width: calc(100% - 30px);
    min-width: 30px;
    height: 20px;
    line-height: 20px;
    word-break: break-all;
  }
}
.messagesActive {
  margin: 0;
}
.tag {
  display: flex;
  width: 58px;
  height: 24px;
  background: #eeeff1;
  border-radius: 4px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>